<template>
    <el-container style="height: 100%;background-image: linear-gradient(135deg,#1352f2,#3c82f5);">
        <el-main>
            <el-row>
                <img src="/images/bg.png" alt="图片未加载" width="100%">
            </el-row>
            <el-row>
                <el-col>
                    <el-card style="background-color: rgba(255, 255, 255, 0.8);">
                        <h3 style="text-align: center;padding: 10px 0;">海内存知己,天涯若比邻</h3>
                        <el-form label-position="top" :label-width="800">
                            <el-form-item label="用户名(邮箱)">
                                <el-input placeholder="请输入您的用户名称或邮箱:" v-model="loginForm.loginParam"></el-input>
                            </el-form-item>
                            <el-form-item label="密码：">
                                <el-input placeholder="输入密码:"  v-model="loginForm.password" @keydown.enter="login()"></el-input>
                            </el-form-item>
                                <p style="text-align: center;"><el-button type="primary" @click="login()">登录</el-button></p>
                        </el-form>
                        </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import qs from 'qs';
import { ElMessage } from 'element-plus';
import router from '@/router';

//登录表单
const loginForm = ref({
    loginParam:'',
    password:''
});

//获取当前登录人
const user = ref({});

function login() {
    let data = qs.stringify(loginForm.value);
    console.log(data);
    axios.post(BASE_URL+'/v1/user/login',data)
    .then((response)=>{
        if (response.data.code == 0) {
            ElMessage.success('登录成功！');
            user.value = response.data.data;
            localStorage.setItem('user',JSON.stringify(user.value));
            router.push('/theme')
        }
        else {
            ElMessage.error('登录失败！请稍后再试');
        }
    });
}

</script>

<style>

</style>